<template>
  <div class="content-container" style="position: relative">
    <img class="system-logo-icon" src="@/assets/logo.png"></img>
    <div style="height: 10px"></div>
    <div class="panel">
        <div class="title">{{data.jfalbt}}</div>
        <div class="content" v-html="data.alnr00">
        </div>
      </div>


  </div>
</template>
<script>
import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {laborRightsApi} from "@/api";

export default {
  name:"case-detail",
  components:{
    ReturnBtn
  },
  data(){
    return {
      data:{
        jfalxh:"",
        alnr00:"",
        jfalbt:""
      }
    }
  },
  mounted() {
    this.data.jfalxh=this.$route.query.jfalxh
    this.queryCaseInfo()

  },
  methods:{

    queryCaseInfo(){
      laborRightsApi.queryCaseInfo({jfalxh: this.data.jfalxh}).then((res) => {
        this.data.alnr00 = res.data.alnr00
        this.data.jfalbt=res.data.jfalbt


      }).catch(()=>{

      })
    }
  }
}
</script>

<style lang="scss" scoped >
.panel{
    color: #FFFFFF;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 1);
    width: 60%;
    margin: 0px auto 0px auto;
    background-color: #226ac4;
    padding: 0px 20px 10px 20px;
    min-height: calc(100vh - 60px);
  .title{
    font-size: 30px;
    font-weight: bolder;
  }
  .time{
    text-align: left;
    padding-left: 50px;
    margin-top: 10px;
  }
  .content{
    border-top: 1px dashed #2c3e50;
    padding-top: 20px;
    margin-top: 20px;
    text-align: left;
    overflow-y: auto;
    font-size: 20px;
  }
}

</style>
